<!DOCTYPE html>
<html lang="en">
<head>
<!-- 定义文档的字符编码 -->
<meta charset="UTF-8">
<!-- 设置网页的标题 -->
<title>Real-time Notifications</title>
</head>
<body>
<!-- 显示通知列表的标题 -->
<h1>Notifications:</h1>
<!-- 动态添加通知的容器 -->
<ul id="notifications"></ul>

<script type="text/javascript">
// 检查浏览器是否支持EventSource接口
if(typeof(EventSource)!=="undefined") {
	// 创建EventSource对象，连接到服务器的事件流
	var source = new EventSource("/events");
	// 监听来自服务器的消息事件
	source.onmessage = function(event) {
		// 创建一个新的<li>元素来显示通知
		var li = document.createElement("li");
		// 设置<li>元素的文本内容为接收到的消息数据
		li.textContent = event.data;
		// 将新的通知添加到通知列表中
		document.getElementById("notifications").appendChild(li);
	};
} else {
	// 如果浏览器不支持EventSource，显示提示信息
	document.write("Sorry, your browser does not support server-sent events.");
}
</script>
</body>
</html>